<template>
  <div class="index">
    <!--Corporate 1 Header Section-->
    <div class="header-section section">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <!--Logo-->
            <div class="float-left" style="display: flex; flex-direction: row;">
              <a href="corporate" class="header-logo"
                ><img
                  style="width: 80px; height: 70px; margin-top: -20px"
                  src="logo.jpg"
                  alt=""
              /></a>
              <div style="display: flex; flex-direction: column;     padding-top: 19px;margin-left: 29px;">
                <div>帆语科技（上海）有限公司</div>
                <div>Fanyu Technology （Shanghai）Co;Ltd.</div>
              </div>
            </div>
            <!--Menu-->
            <div class="float-right">
              <nav class="main-menu multi-page-menu text-black">
                <ul>
                  <li :class="active == '1' ? 'active' : ''">
                    <a @click="ck(1, 'corporate')">主页</a>
                  </li>

                  <li :class="active == '2' ? 'active' : ''">
                    <a @click="ck(2, 'product?type=0')">硬件产品</a>
                    <ul class="sub-menu">
                      <li>
                        <a @click="ck(2, 'product?type=1')">质量式流量计</a>
                      </li>
                      <li>
                        <a @click="ck(2, 'product?type=2')">容积式流量计</a>
                      </li>
                      <li>
                        <a @click="ck(2, 'product?type=3')">齿轮流量计</a>
                      </li>
                      <li>
                        <a @click="ck(2, 'product?type=4')">涡轮流量计</a>
                      </li>
                      <li>
                        <a @click="ck(2, 'product?type=5')">电磁流量计</a>
                      </li>
                      <li>
                        <a @click="ck(2, 'product?type=6')">北斗传输终端</a>
                      </li>
                      <li>
                        <a @click="ck(2, 'product?type=7')">工业通讯设备</a>
                      </li>
                    </ul>
                  </li>
                  <li :class="active == '3' ? 'active' : ''">
                    <a @click="ck(3, 'software?type=0')">软件产品</a>
                    <ul class="sub-menu">
                      <li>
                        <a @click="ck(3, 'software?type=1')">船舶能效系统</a>
                      </li>
                      <li>
                        <a @click="ck(3, 'software?type=2')">信息化管理平台</a>
                      </li>
                      <li>
                        <a @click="ck(3, 'software?type=3')">MRV系统</a>
                      </li>
                      <li>
                        <a @click="ck(3, 'software?type=4')">加油分析</a>
                      </li>
                      <li>
                        <a @click="ck(3, 'software?type=5')">车辆管理系统</a>
                      </li>
                      <li>
                        <a @click="ck(3, 'software?type=6')">定量装车系统</a>
                      </li>
                    </ul>
                  </li>
                  <li :class="active == '4' ? 'active' : ''">
                    <a @click="ck(4, 'about')">关于我们</a>
                  </li>
                  <li :class="active == '5' ? 'active' : ''">
                    <a @click="ck(5, 'contact')">联系我们</a>
                  </li>
                </ul>
              </nav>
              <!-- <a href="#" class="btn btn-border-gradient btn-hover-gradient"
                >马上购买</a
              > -->
            </div>
            <!--Mobile Menu-->
            <div class="mobile-menu multi-page text-black"></div>
          </div>
        </div>
      </div>
    </div>

    <router-view :key="$route.fullPath" />
    <!--Corporate Hero Section 1-->

    <!-- <div class="co-footer-bottom-1 section bg-dark">
      <div class="container">
        <div class="row"></div>
      </div>
    </div> -->
  </div>
</template>
  <script>
export default {
  name: "index",
  data() {
    return {
      active: 1,
    };
  },
  // 注册组件
  components: {},
  methods: {
    ck(data, url) {
      this.active = data;
      this.$router.push(url);
    },
  },
  created() {
    console.log(this.active);
    // 监听
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
};
</script>
  <style lang="scss">
.index {
  .list {
    display: flex;
    flex-direction: row;
    align-items: center;
    img {
      width: 15px;
      height: 18px;
      margin-right: 10px;
    }
  }
}
</style>
